<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <style>
body{
background-image: url("nba.jpg.jpg.webp");
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
        * {
            margin: 0;
            padding: 0;
        }
 
        li {
            list-style: none;
        }
 
        a {
            text-decoration: none;
            color: #eee;
        }
 
        .focus {
            margin: 100px auto;
            position: relative;
            width: 600px;
            height: 400px;
            background-color: purple;
            overflow: hidden;
        }
 
        /* 左右侧切换的小按钮 */
        .focus .arrow {
            display: none;
            width: 24px;
            height: 40px;
            /* border: 1px solid #eee; */
            line-height: 40px;
            text-align: center;
            background: rgba(104, 103, 103, 0.3);
            font-size: 20px;
            /* 用了定位注意层级问题 */
            z-index: 11;
        }
 
        .focus .arrow-l {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -15px;
            border-radius: 0 20px 20px 0;
 
        }
 
 
        .focus .arrow-r {
            position: absolute;
            right: 0;
            top: 50%;
            margin-top: -15px;
            border-radius: 20px 0 0 20px;
 
        }
 
        /* 轮播图的区域 */
        .focus ul {
            /* ul 里面放着所有轮播图的图片，所以 ul 的宽度必须足够大能够容纳所有图片
               这里有4张图片，ul宽度设置为 600% */
            width: 600%;
            position: absolute;
            top: 0;
            left: 0;
 
        }
 
        .focus ul li {
            float: left;
        }
 
        .focus ul li a img {
            width: 600px;
            height: 400px;
        }
 
        /* 小圆点显示区域 */
        .focus ol {
            position: absolute;
            left: 50%;
            bottom: 20px;
            margin-left: -40px;
        }
 
        .focus ol li {
            float: left;
            width: 10px;
            height: 10px;
            margin: 5px;
            border-radius: 50% 50%;
            border: 1px solid #fff;
            cursor: pointer;
 
        }
 
        .current {
            background-color: #fff;
        }
        
h1{text-align:center;background-color: black;color: white;}
div.aaa{
  background-color: lightgrey;
  width: 500px;
  border: 15px solid black;
  padding: 50px;
  margin: 20px;
  text-align: center;
}
table{width:100%}
th{height: 50px;
   background-color:#111;
   color:white;
}
tr{
  background-color: aqua;
}
td:hover {background-color: #f5f5f5;}
footer{background-color: #111;text-align:center;font-size:35px;color:white ;}

        </style>
        <script>
        window.addEventListener('load', function() {
    // 1. 获取元素
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    // 2. 鼠标经过focus 就显示隐藏左右按钮
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.display = 'block';
        arrow_r.style.display = 'block';
        clearInterval(timer);
        timer = null; // 清除定时器变量
    });
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.display = 'none';
        arrow_r.style.display = 'none';
        timer = setInterval(function() {
            //手动调用点击事件
            arrow_r.click();
        }, 2000);
    });
    // 3. 动态生成小圆圈  有几张图片，我就生成几个小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        // 创建一个小li 
        var li = document.createElement('li');
        // 记录当前小圆圈的索引号 通过自定义属性来做 
        li.setAttribute('index', i);
        // 把小li插入到ol 里面
        ol.appendChild(li);
        // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
        li.addEventListener('click', function() {
            // 干掉所有人 把所有的小li 清除 current 类名
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            // 留下我自己  当前的小li 设置current 类名
            this.className = 'current';
            // 5. 点击小圆圈，移动图片 当然移动的是 ul 
            // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
            // 当我们点击了某个小li 就拿到当前小li 的索引号
            var index = this.getAttribute('index');
            // 当我们点击了某个小li 就要把这个li 的索引号给 num  
            num = index;
            // 当我们点击了某个小li 就要把这个li 的索引号给 circle  
            circle = index;
            // num = circle = index;
            console.log(focusWidth);
            console.log(index);
            //动画函数调用
            animate(ul, -index * focusWidth);
        })
    }
    // 把ol里面的第一个小li设置类名为 current
    ol.children[0].className = 'current';
    // 6. 克隆第一张图片(li)放到ul 最后面
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // 7. 点击右侧按钮， 图片滚动一张
    var num = 0;
    // circle 控制小圆圈的播放
    var circle = 0;
    // flag 节流阀
    var flag = true;
    arrow_r.addEventListener('click', function() {
        if (flag) {
            flag = false; // 关闭节流阀
            // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            //动画函数调用
            animate(ul, -num * focusWidth, function() {
                flag = true; // 打开节流阀
            });
            // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle++;
            // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
            if (circle == ol.children.length) {
                circle = 0;
            }
            // 调用函数
            circleChange();
        }
    });
 
    // 9. 左侧按钮做法
    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
 
            }
            num--;
            //动画函数调用
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
            circle--;
            // 如果circle < 0  说明第一张图片，则小圆圈要改为第4个小圆圈（3）
            circle = circle < 0 ? ol.children.length - 1 : circle;
            // 调用函数
            circleChange();
        }
    });
 
    function circleChange() {
        // 先清除其余小圆圈的current类名
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        // 留下当前的小圆圈的current类名
        ol.children[circle].className = 'current';
    }
    // 10. 自动播放轮播图
    var timer = setInterval(function() {
        //手动调用点击事件
        arrow_r.click();
    }, 2000);
 
})
    </script>
  </head>
    <body>

        <ul>
          <li><a href="https://sports.qq.com/nba/">比赛直播</a></li>
          <li><a href="1.html#a">照片</a></li>
          <li><a href="https://jump2.bdimg.com/f?ie=utf-8&kw=nba&fr=search">贴吧</a></li>
          <li><a href="5.html">注册</a></li>
        </ul>
        
        <div class="focus">
          <a href="javascript:;" class="arrow-l arrow">
              &lt;
          </a>
          <a href="javascript:; " class="arrow-r arrow">
              >
          </a>
          <ul>
              <li><a href="#"><img src="https://img.tt98.com/d/file/96kaifa/20180529182113879/5b0cb8406ea22.jpg" alt=""></a></li>
              <li><a href="#"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.02d28e8f0191cf6b99ab24ea990d2843?rik=IWFT4YJNtKrlOA&riu=http%3a%2f%2fi.52desktop.cn%3a81%2fupimg%2fallimg%2f20130506%2f2013561082187778046.jpg&ehk=2iFFN9%2bJrM2dPLoOmn6mnQMj%2ftMh%2b66DgljnMXRKLys%3d&risl=&pid=ImgRaw&r=0" alt=""></a></li>
              <li><a href="#"><img src="https://ts1.cn.mm.bing.net/th/id/R-C.bf9a45c81c59d33a764eb161156e0b04?rik=dYo6W3G4vGJGKQ&riu=http%3a%2f%2fphoto.tuchong.com%2f5186004%2ff%2f484508769.jpg&ehk=s7vQYy0neweTJsrkfR4Fc87SvIH3o3GLopuJU541b%2f0%3d&risl=&pid=ImgRaw&r=0" alt=""></a></li>
              <li><a href="#"><img src="https://www.sportspress.cn/webimages/2002/1-200205144I40-L.jpg" alt=""></a></li>
          </ul>
          <ol class="circle">
          </ol>
      </div>
        <p>
      
        <h1>介绍</h1>
        <div class="aaa">
          美国职业篮球联赛（National Basketball Association），简称美职篮（NBA），是由北美30支职业球队组成的男子职业篮球联盟，是美国四大职业体育联盟之一。 [1] 
其中诞生了如：迈克尔·乔丹、威尔特·张伯伦、埃尔文·约翰逊、拉里·伯德、奥斯卡·罗伯特森、约翰·哈弗利切克、里克·巴里、约翰·斯托克顿、卡尔·马龙、埃尔金·贝勒、大卫·罗宾逊、朱利叶斯·欧文、沙奎尔·奥尼尔、查尔斯·巴克利、阿伦·艾弗森、詹姆斯·哈登、科比·布莱恩特、姚明、丹尼斯·罗德曼、克里斯·保罗、勒布朗·詹姆斯、德怀恩·韦德、比尔·拉塞尔、凯文·杜兰特、卡里姆·阿卜杜·贾巴尔等传奇球星。 [2]  [44] 
NBA分为东部联盟和西部联盟，每个联盟又被划分为3个赛区，各赛区由5支球队组成。每个赛季结束后下赛季开始前，会举行NBA选秀；NBA夏季联赛，NBA季前赛、NBA常规赛通常在十月份打响，季前赛包含NBA海外赛。其中在2月份有一项特殊的表演赛事NBA全明星赛，NBA常规赛结束后，东、西部联盟分别由前八名进入季后赛，决出东西部冠军，晋级NBA总决赛，表现最优秀球员获比尔·拉塞尔NBA总决赛最有价值球员奖荣誉。 
        </div>
      </p>
    
        <h1>球队</h1>
        
            <table border="10">
                
                <th colspan="3">东部</th>
                
                <th colspan="3">西部</th>

                <tr>
                  <td>篮网</td>
                  <td>凯尔特人</td>
                  <td>雄鹿</td>
                  <td>灰熊</td>
                  <td>掘金</td>
                  <td>鹈鹕</td>
                </tr>
                <tr>
                  <td>76人</td>
                  <td>骑士</td>
                  <td>尼克斯</td>
                  <td>独行侠</td>
                  <td>国王</td>
                  <td>快船</td>
                </tr>
                <tr>
                  <td>步行者</td>
                  <td>热火</td>
                  <td>老鹰</td>
                  <td>太阳</td>
                  <td>勇士</td>
                  <td>爵士</td>
                </tr>
                <tr>
                  <td>公牛</td>
                  <td>猛龙</td>
                  <td>奇才</td>
                  <td>森林狼</td>
                  <td>开拓者</td>
                  <td>湖人</td>
                </tr>
                <tr>
                  <td>魔术</td>
                  <td>活塞</td>
                  <td>黄蜂</td>
                  <td>雷霆</td>
                  <td>马刺</td>
                  <td>火箭</td>
                </tr>
                </table>
                <footer>
                  <a href="2.html">报告</a>
                          
                     </footer>
            
    </body>
    
   
</html>